<template>
    <div class="idnexBox">
        <el-container>
            <!-- 侧边栏 -->
            <v-side></v-side>

            <el-container>
                <!-- 头部 -->
                <el-header class="header">
                    M78星云后备隐藏能源
                    <el-dropdown class="dropdown" split-button trigger="click" @command="exit">
                        <span class="el-dropdown-link">
                            {{ store.getters['getuserInfo'].username }}
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>安全退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-header>

                <!-- 主体内容 -->
                <el-main class="main" style="background-color: #f2f2f2;">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script lang='ts' setup>
//引入侧边栏
import vSide from "../components/aside.vue";
//引入仓库
import { useStore } from "vuex";
//引入路由跳转
import {useRouter} from "vue-router";
//引入消息提示
import {ElMessage} from "element-plus";

const router = useRouter();
const store = useStore();

//================事件
const exit = () => {
    //要把仓库里面储存的登录凭证删除
    store.commit('REQ_USERINFO',false);
    //跳转到登录页
    router.push('/login');
    //提示
    ElMessage({
        type:"success",
        message:"已成功退出",
        duration:500
    })
}
</script>


<style lang='less' scoped>
.idnexBox {
    .header {
        background: skyblue;
        font-size: 30px;
        text-align: center;
        font-family: kaiti;
        color: #fff;
        line-height: 60px;

        .dropdown {
            float: right;
            margin-top: 14px;
        }
    }

    .main {
        height: calc(100vh - 60px);
    }
}
</style>